<template>
	<u-navbar placeholder :title="title" :bgColor="bgColor" :safeAreaInsetTop="safeAreaInsetTop">
		<view class="u-nav-slot" slot="left">
			<u-icon name="arrow-left" size="19" @tap="$emit('back')"></u-icon>
			<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
			<u-icon name="home" size="20" @tap="$emit('home')"></u-icon>
		</view>
	</u-navbar>
</template>
<script>
	/**
	 * Navbar 
	 * @description 统一封装的导航栏
	 * @property {String} title  导航栏标题
	 * @property {Boolean} safeAreaInsetTop 安全顶部 
	 * @property {String} bgColor 'bgColor' 背景颜色 默认透明
	 * @description 如果需要重写 返回返回方法或是跳转到首页，则需要 重写mixins中的 getBack 和 home
	 */
	export default {
		props: {
			title: {
				type: String,
				default: '标题'
			},
			safeAreaInsetTop: {
				type: Boolean,
				default: true
			},
			bgColor: {
				type: String,
				default: 'transparent'
			}
		},
	}
</script>
<style lang="scss" scoped>
	.u-nav-slot {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border: 1rpx solid #FFE6FA;
		border-radius: 100rpx;
		padding: 3rpx 7rpx;
		opacity: 1;
	}
</style>
